<template>
  <div class="goodsinfo">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#fff">
      <van-swipe-item v-for="item in swipes.swiper" :key="item.id">
        <div class="img">
          <img :src="item.swipe" alt="" />
        </div>
      </van-swipe-item>
    </van-swipe>
    <div class="main-box">
      <div class="main-name">{{ swipes.name }}</div>
      <span class="main-bright">【{{ swipes.bright }}】</span>
      <span class="main-title">{{ swipes.title }}</span>
      <div class="main-price">¥ {{ swipes.price }}</div>
    </div>
    <p class="number">
      购买数量:
      <van-stepper v-model="value"></van-stepper>
    </p>
    <van-tabs animated>
      <van-tab title="图文详情">
        <div class="img-box" v-for="img in swipes.Images" :key="img.id">
          <img :src="img.one" alt="" />
        </div>
      </van-tab>
      <van-tab title="参数">
        <div class="img-homePeizhi" v-html="swipes.homePeizhi"></div>
      </van-tab>
    </van-tabs>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" to="/home/pay" />
    </van-goods-action>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  props: ['id'],
  data() {
    return {
      value: 1,
      swipes: []
    }
  },
  methods: {
    async getData() {
      const res = await axios.get('http://localhost:3000/homeData')
      res.data[this.$route.query.shop_id - 1].data.forEach(item => {
        if (item.id === Number(this.$route.query.id)) {
          this.swipes = item
        }
      })
      // console.log(this.swipes)
    }
  },
  created() {
    this.getData()
  }
}
</script>
<style lang="scss">
.goodsinfo {
  margin-bottom: 60px;
  margin-top: 46px;
  .my-swipe {
    width: 100%;
    height: 418px;
    // background-color: red;
    .img {
      width: 100%;
      display: flex;
      justify-content: center;
      img {
        width: 316px;
        height: 316px;
        margin-top: 40px;
        background-color: pink;
      }
    }
    .van-swipe__indicator {
      border: 0.5px solid rgb(218, 218, 218);
      background-color: rgb(158, 158, 158);
    }
  }
  .main-box {
    padding: 20px;
    .main-name {
      font-size: 24px;
      margin-bottom: 10px;
    }
    .main-bright {
      color: red;
      margin-right: 12px;
    }
    .main-title {
    }
    .main-price {
      font-size: 40px;
      margin-top: 10px;
      color: red;
    }
  }
  .number {
    border-top: 2px solid #e7e7e7;
    border-bottom: 2px solid #e7e7e7;
    padding: 20px;
    display: flex;
    align-items: center;
    .van-stepper {
      margin-left: 10px;
    }
  }
}
.van-nav-bar {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
}
.img-box {
  img {
    width: 100%;
  }
}
</style>